<template>
  <div>
    <div class="headstyle">
    <el-row :gutter="20">
         <el-col :span="6">
                <div class="grid-content bg-purple">
                <span class="locsty"><i class="el-icon-location iconsty"></i>当前位置：课堂互动管理</span>
                </div>
            </el-col>
      <el-col :span="8" >
        <el-select class="selectcourse" v-model="value" @change="selectcourse($event)" filterable placeholder="请选择课程名称">
          <el-option
            v-for="item in options"
            :key="item.Cos_ID"
            :label="item.Cos_Name"
            :value="item.Cos_ID"
            :time="item.examtime"
          ></el-option>
        </el-select>
      </el-col>
        </el-row>
    </div>
    <div :class="middle">
       <el-row :gutter="20">
      <el-col :span="8" >
        <span>考试时间</span>
        <el-select
          v-model="value2"
          @change="changetime($event)"
          :disabled="state"
          placeholder="请选择"
        >
          <el-option
            v-for="item in options2"
            :key="item.time"
            :label="item.time_val"
            :value="item.time"
          ></el-option>
        </el-select>
        <span>分钟</span>
      </el-col>
 <el-col :span="8" >
     <el-button type="danger" icon="el-icon-delete" @click="clearexam">清空试题</el-button>
     </el-col>
      <el-col :span="8">
      
        <div align="left" style="float:left">
          <el-button type="primary" icon="el-icon-download">
               <a class="download" href="../../../static/试题导入模板.xlsx" download title="下载">下载试题模板</a>
          </el-button>
        </div>
        <div align="right">
          <el-upload
            class="upload-demo"
            ref="upload"
            action="/Interact"
            :file-list="fileList"
            :http-request="uploadSectionFile"
            accept=".xlsx, .xls, .mp4"
            :auto-upload="false"
          >
            <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
            <el-button
              style="margin-left: 10px;"
              size="small"
              type="success"
              @click="submitUpload"
            >上传到服务器</el-button>
       
          </el-upload>
        </div>
      </el-col>
    </el-row>
    </div>

    <div style="margin-top:25px;">
      <el-table
        :data="tableData"
        border
        style="width: 100%"
        :header-cell-style="{
      'background':'#e6f3f8',
      'font-weight':'800',
      'color':'black',
    }"
      >
        <el-table-column fixed prop="order" label="序号" width="50"></el-table-column>
        <el-table-column prop="type" label="题型" width="80"></el-table-column>
        <el-table-column prop="question" label="题目" width="500"></el-table-column>
        <el-table-column prop="optionA" label="选项A"></el-table-column>
        <el-table-column prop="optionB" label="选项B"></el-table-column>
        <el-table-column prop="optionC" label="选项C"></el-table-column>
        <el-table-column prop="optionD" label="选项D"></el-table-column>
        <el-table-column prop="optionE" label="选项E"></el-table-column>
        <el-table-column prop="optionF" label="选项F"></el-table-column>
        <el-table-column prop="answer" label="答案"></el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      fileList: [],
      options: [],

      options2: [
        {
          time: "5",
          time_val: "5"
        },
        {
          time: "10",
          time_val: "10"
        },
        {
          time: "15",
          time_val: "15"
        },
        {
          time: "20",
          time_val: "20"
        },
        {
          time: "25",
          time_val: "25"
        }
      ],
      tableData: [],
      value: "",
      value2: "",
      couid: "",
      middle:"middlef",
      state: true
    };
  },

  mounted: function() {
    this.loadinfo();
  },
  methods: {
    loadinfo() {
      this.$axios.get("/Interact/getcousinfo", { params: {} }).then(json => {
        this.options = JSON.parse(json.data);
      });
    },

    clearexam() {
      let couid = this.value;
      this.$confirm("确定清空本课程课堂互动试题吗？", "提示").then(() => {
        this.$axios
          .delete("/Interact/clearexam", { params: { couid: couid } })
          .then(json => {
            if (json.data == "OK") {
              this.$message({
                message: "删除试卷成功！",
                type: "success"
              });
            this.tableadd(couid);
            } else {
              this.$message({
                message: "删除试卷失败！",
                type: "warning"
              });
            
            }
            
          });
      });
    },

    selectcourse(value) {
      this.couid = value;
      this.state = false;
       this.middle="middlet";
      this.options.forEach(element => {
        if (element.Cos_ID == value) {
          this.value2 = element.examtime;
        }
      });
      this.tableadd(value);
    },

    tableadd(couid) {
      this.$axios
        .get("/Interact/getexam", { params: { couid: couid } })
        .then(json => {
          this.tableData = JSON.parse(json.data);
        });
    },

    changetime(selVal) {
      let couid = this.couid;
      let examtime = selVal;
      var list = {
        examtime: examtime
      };
      this.$axios.put("/Interact/changeExamtime/" + couid, list).then(json => {
        if (json.data == "OK") {
          this.$message({
            message: "考试时间修改成功！",
            type: "success"
          });
          this.loadinfo();
        } else {
          this.$message({
            message: "考试时间修改失败！",
            type: "warning"
          });
        }
      });
    },

    submitUpload() {
      let list = document.getElementsByClassName(
        "el-upload-list__item is-ready"
      );
      if (list.length == 0) {
        this.$message({
          type: "warning",
          message: "请选择需要导入的模板！"
        });
        return;
      }
      this.$refs.upload.submit();
    },
    uploadSectionFile(param) {
      var fileObj = param.file;
      // FormData 对象
      var form = new FormData();
      // 文件对象
      form.append("file", fileObj);
      form.append("couid", this.value);
      this.$axios.post("/Interact/Post", form).then(res => {
        if (res.data == "OK") {
          this.$message({
            type: "success",
            message: "试题导入成功！"
          });
          this.tableadd(this.value);
         
        } else {
          this.$message({
            type: "success",
            message: "试题导入失败！"
          });
        
        }
          this.$refs.upload.clearFiles();
      });
    },
    handleRemove(file, fileList) {
      //console.log(file, fileList);
    },
    handlePreview(file) {
      //console.log(file);
    }
  }
};
</script>
<style scoped>
.download{
  color: white;
    text-decoration: none;
}
.locsty {
  font-size: 16px;
  font-family: "Microsoft YaHei";
}
.iconsty {
  color: #53b9fe;
  font-size: 22px;
}

.headstyle {
  border-bottom: 2px solid #e5e5e5;
  padding-bottom: 20px;
}

.middlef{
  display:none;
}
.middlet{
  margin-top: 25px;
}

.selectcourse{
  float: left;
}
</style>


